<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--针对IE的兼容性问题-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--针对响应式布局之后，针对不同的布局大小自适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>register</title>
    <!--导入bootstrap的主样式-->
    <link rel="stylesheet" href="component/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css">
    <style type="text/css">
        body {
            background-image: url("images/Cirno (24).jpg");
        }

        .mgr {
            margin: 50px 0;
        }

        .avatar {
            width: 100px;
            height: 75px;
        }

        #personalDescription {
            resize: none;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="register_box">
        <figure class="text-center mgr">
            <img src="images/Cirno%20(20).jpg" alt="默认登录头像" class="avatar img-circle">
            <h2>register</h2>
        </figure>
        <form action="javascript:void (0)" name="register" method="post" class="form-horizontal">
            <div class="form-group">
                <label class="col-md-offset-3 col-md-1 control-label">用户名:</label>
                <div class="col-md-4"
                     data-toggle="popover" data-trigger="hover"
                     data-content="不能为空" data-placement="right">
                    <input type="text" name="username" class="form-control" placeholder="UserName" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-offset-3 col-md-1 control-label">密码:</label>
                <div class="col-md-4"
                     data-toggle="popover" data-trigger="hover"
                     data-content="最少输入6个字符" data-placement="right">
                    <input type="password" name="password" class="form-control"placeholder="Password" id="password" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-offset-3 col-md-1 control-label">上传头像:</label>
                <div class="col-md-4">
                    <!--<input type="file" name="loadFile" class="form-control">-->
                    <label class="control-label">
                        <input type="file" name="loadFile">
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-offset-3 col-md-1 control-label">兴趣爱好:</label>
                <div class="col-md-4 checkbox" id="hobbies_box"
                     data-toggle="popover" data-trigger="hover"
                     data-content="只能选择两个" data-placement="right">
                    <label>
                        <input type="checkbox" name="hobbies">美术
                    </label>
                    <label>
                        <input type="checkbox" name="hobbies">音乐
                    </label>
                    <label>
                        <input type="checkbox" name="hobbies">美食
                    </label>
                    <label>
                        <input type="checkbox" name="hobbies">游戏
                    </label>
                    <label>
                        <input type="checkbox" name="hobbies">视频
                    </label>
                    <label>
                        <input type="checkbox" name="hobbies">满足
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-offset-3 col-md-1 control-label">文化程度:</label>
                <div class="col-md-4 radio" data-toggle="popover" data-trigger="hover"
                     data-content="请选择一个" data-placement="right">
                    <label>
                        <input type="radio" name="degreeOfEducation">初中
                    </label>
                    <label>
                        <input type="radio" name="degreeOfEducation">高中
                    </label>
                    <label>
                        <input type="radio" name="degreeOfEducation">大专
                    </label>
                    <label>
                        <input type="radio" name="degreeOfEducation">本科
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-offset-3 col-md-1 control-label">个人简介:</label>
                <!--popover不要直接写在文本域textarea上面，那样会使得popover被挤压的-->
                <!--popover弹出框可能会被挤压，注意父元素要留出足够的空隙给弹出框-->
                <div class="col-md-4" data-toggle="popover" data-trigger="hover"
                     data-content="最多输入50个字符" data-placement="right">
                <!--<div class="col-md-4" data-toggle="tooltip" title="最多输入50个字符">-->
                    <!--<div class="col-md-4">-->
                    <!--    <textarea class="form-control" rows="6" id="personalDescription"-->
                    <!--              maxlength="50" data-toggle="popover" title="输入限制:" data-trigger="focus"-->
                    <!--              data-content="最多输入50个字符" data-placement="right"></textarea>-->
                    <textarea class="form-control" name="personalDescription" id="personalDescription" rows="6"
                              maxlength="50" required></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-4 col-md-4">
                    <button type="submit" class="btn btn-success">注册</button>
                    <a href="login.html" class="btn btn-danger btn-md pull-right">登录</a>
                </div>
            </div>
        </form>
    </div>
</div>
<!--导入js文件-->
<script type="text/javascript" src="component/jQuery/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="component/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="component/mimo84-bootstrap-maxlength-5a82eb2/src/bootstrap-maxlength.js"></script>
<script type="text/javascript" src="js/register.js"></script>
<script type="text/javascript">
    // bootstrap从性能的角度考虑，没有吧tooltip和popover等组件自动加载执行，而是由用户自行决定是否启用这个功能
    // 启用的代码如下：
    $(function () {
        $('[data-toggle="popover"]').popover();
        $('[data-toggle="tooltip"]').tooltip();
    })
</script>
</body>
</html>